<template>
    <div class="article">
        <div class="search">
            <div class="left">
                <!-- 项目 -->
                <div class="search_list project_name">
                    <span class="search_text">项目名称：</span>
                    <el-select v-model="project_name" filterable clearable placeholder="请选择">
                        <el-option
                            v-for="item in related_project_list"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <!-- 创建时间 -->
                <div class="search_list">
                    <span class="search_text">创建时间：</span>
                    <el-date-picker
                        v-model="create_time"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                </div>
            </div>
            <div class="center">
                <!-- 标题名称 -->
                <div class="search_list">
                    <span class="search_text">文章标题：</span>
                    <el-input v-model="article_title" placeholder="输入"></el-input>
                </div>
            </div>
            <div class="right">
                <!-- 状态 -->
                <div class="search_list">
                    <span class="search_text">文章状态：</span>
                    <el-select v-model="article_status" clearable placeholder="请选择">
                        <el-option
                            v-for="item in article_status_list"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </div>
            </div>
        </div>
        <!--列表-->
        <div class="list article_list blockMould">
            <div class="list_head_button">
                <div class="search_button">
                    <el-button size="mini" type="warning" plain @click="addArticle">新增</el-button>
                </div>
                <div class="search_name">
                    <el-button size="mini" type="primary" @click="search_list">查询</el-button>
                    <el-button size="mini" @click="reset_list">重置</el-button>
                </div>
            </div>
            <el-table
                :header-cell-style="{background:'#F6F7FB',color:'#666666',height: '50px'}"
                :row-class-name="tableRowClassName"
                :data="articleList">
                <el-table-column
                    prop="sysInsert"
                    label="创建时间"
                    min-width="28">
                </el-table-column>
                <el-table-column
                    label="标题"
                    min-width="35">
                    <template slot-scope="scope">
                        <el-tooltip
                            trigger="hover"
                            placement="top"
                            v-model="scope.row.is_show_article_tip"
                            :open-delay="500"
                            effect="dark"
                            :disabled="!scope.row.is_show_article_tip"
                            popper-class="export_button_promit show_all_title">
                            <div slot="content">{{scope.row.articleTitle}}</div>
                            <div @mouseenter="showArticleTips($event,scope.row)"
                            class='show_all_tip'>{{scope.row.articleTitle}}</div>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column
                    label="项目名称"
                    min-width="30">
                    <template slot-scope="scope">
                        <el-tooltip
                            trigger="hover"
                            placement="top"
                            v-model="scope.row.is_show_product_tip"
                            :open-delay="500"
                            effect="dark"
                            :disabled="scope.row.is_show_product_tip"
                            popper-class="export_button_promit show_all_title">
                            <div slot="content">{{scope.row.productName}}</div>
                            <div @mouseenter="showProductTips($event,scope.row)" class='show_all_tip'>{{scope.row.productName}}</div>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column
                    label="状态"
                    min-width="15">
                    <template slot-scope="scope">
                        <span style="background-color: rgba(26, 179, 148, 0.2);color: #1AB394;" v-if="scope.row.articleStatus == '发布'">{{scope.row.articleStatus}}</span>
                        <span style="background-color: rgba(145, 147, 152, 0.2);color: #919398;" v-if="scope.row.articleStatus == '停用'">{{scope.row.articleStatus}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="sysModify"
                    label="更新时间"
                    min-width="25">
                </el-table-column>
                <el-table-column
                    label="操作"
                    min-width="20">
                    <template slot-scope="scope">
                        <el-tooltip popper-class="operation_button_promit" effect="dark" content="编辑" placement="bottom">
                            <el-button type="text" @click="edit_info(scope.row)">
                                <img src="../../assets/common/edit.svg" alt="">
                            </el-button>
                        </el-tooltip>
                        <el-tooltip popper-class="operation_button_promit" effect="dark" content="链接" placement="bottom">
                            <el-button type="text" @click="show_active_link(scope.row)">
                                <img src="../../assets/common/active_link.svg" alt="">
                            </el-button>
                        </el-tooltip>
                        <el-tooltip popper-class="operation_button_promit" effect="dark" content="删除" placement="bottom">
                            <el-button type="text" @click="delete_article(scope.row)">
                                <img src="../../assets/common/delete.svg" alt="">
                            </el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <pagination :page="page" @changeCurrentPage="handleCurrentChange" @changePageSize="handlePageSize"/>
        </div>
        <!-- 链接 -->
        <el-dialog
        title="链接"
        :visible.sync="activeLink"
        width="526px"
        class="active_link_dialog"
        :before-close="closeActiveLinkDialog">
            <div>
                <div class="search_list active_title">
                    <span class="search_text">标题：</span>
                    <span class="search_value">{{active_title}}</span>
                </div>
                <div class="search_list link_url">
                    <span class="search_text">链接：</span>
                    <el-input placeholder="请输入内容" v-model="active_link_url" :disabled="true"></el-input>
                    <!-- v-clipboard:error="copy_error" -->
                    <el-button 
                        class="btn" 
                        type="primary" 
                        v-clipboard:copy="active_link_url" 
                        v-clipboard:success="copy_link">复制链接
                    </el-button>
                </div>
                <div class="search_list qrcode">
                    <span class="search_text">二维码：</span>
                    <div class="qr_code" ref="qrCodeUrl" v-if="is_show_qr_code"></div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer copy_success">
                <span v-show="is_show_copy_success_promit">复制成功</span>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import { api, baseAjax, h5Url } from '../../api/api';
    import pagination from '../public/pagination';
    import {statusCode} from '../../utils/index';
    import {formatHour} from '../../utils/validate';
    import Cookies from 'js-cookie';
    import QRCode from 'qrcodejs2';
    import bus from '../../assets/js/eventBus';
    export default {
        name: "articleManagement",
        data() {
            return {
                //分页
                page: {
                    currentPage: 1,    //当前页
                    pageSize: 10,    //每页显示条数
                    totalPage: 0,   //总页数
                    total:null   //总条数
                },
                dialogVisibleEdit:false,  //是否显示编辑弹框
                activeLink:false,   //是否显示活动链接弹框
                article_title:'',   //标题筛选项
                project_name:'',  //相关项目筛选项
                project_list:[],  //项目下拉框值
                related_project_list:[],  //相关项目下拉框值
                article_status:'',   //文章状态筛选项
                article_status_list:[   //文章状态下拉框值
                    {
                        id:0,
                        name:'停用'
                    },
                    {
                        id:1,
                        name:'发布'
                    }
                ],
                create_time:'',   //创建时间筛选项
                articleList:[],  //列表数据
                active_title:'',   //活动标题
                active_link_url:'',   //链接
                is_show_copy_success_promit:false,   //是否显示复制成功提示
                user_info:{},
                is_show_qr_code:false   //是否显示二维码
            }
        },
        components:{
            pagination
        },
        mounted(){
            this.user_info = JSON.parse(this.EncryUtil.decryptByAES(Cookies.get('user_info')));
            this.getArticleList();
            this.getProductList();//获取产品
            this.getRelatedProductList();//获取相关产品
        },
        methods: {
            //修改列表tr颜色
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 === 1) {
                return 'success_row';
                }
                return '';
            },
            //改变当前页码
            handleCurrentChange(currentPage) {
                this.page.currentPage = currentPage;
                this.getArticleList();
            },
            //改变每页条数
            handlePageSize(pageSize){
                this.page.pageSize = pageSize;
                this.getArticleList();
            },
            //重置
            reset_list(){
                this.article_title = '';
                this.project_name = null;
                this.article_status = '';
                this.create_time = '';
            },
            //查询
            search_list(){
                this.handleCurrentChange(1);
            },
            //列表数据
            getArticleList(){
                let that = this;
                let data = {
                    articleStatus:this.article_status,
                    articleTitle:this.article_title,
                    currentPage:this.page.currentPage,
                    pageSize:this.page.pageSize,
                    productId:this.project_name,
                    sysInsert:this.create_time ? formatHour(this.create_time) : '',
                    totalPage:this.page.totalPage
                };
                baseAjax(api.get_article_list, data, (res)=>{
                    if(res.code === statusCode.success){
                        let {pageSize, totalPage, value, count} = res.data;
                        that.page.pageSize = pageSize;
                        that.page.totalPage = totalPage;
                        that.page.total = count;
                        that.articleList = value;
                        that.articleList.forEach(item=>{
                            item.active_link = h5Url+'/activity/details/article/'+item.articleId;
                            item.productName = item.productName && item.productName.length ? item.productName.join(',') : '';
                            item.is_show_article_tip = false;   //是否显示文章标题全部
                            item.is_show_product_tip = false;   //是否显示项目全部
                        });
                    }
                });
            },
            //删除
            delete_article(info){
                console.log(this.articleList)
                console.log(this.page)
                let that = this;
                this.$msgbox({
                    title: `确认删除《 ${info.articleTitle} 》？ `,
                    message: '已接收该文章的用户将无法查看文章',
                    showCancelButton: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then((res) => {
                    api.delete_article = {
                        url:api.delete_article_url+'?articleId='+info.articleId,
                        method:api.delete_article.method
                    };
                    baseAjax(api.delete_article, '', (res)=>{
                        if(res.code === statusCode.success){
                            if(res.data == true){
                                that.$message.success('删除成功');
                                if(that.page.currentPage == that.page.totalPage && that.articleList.length == 1){
                                    that.handleCurrentChange(that.page.currentPage - 1);
                                }else{
                                    that.handleCurrentChange(that.page.currentPage);
                                }
                            }else{
                                that.$message.error('删除失败');
                            }
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            },
            //显示活动链接
            show_active_link(info){
                this.activeLink = true;
                this.active_title = info.articleTitle;
                this.active_link_url = info.active_link+'?linkType=activity';
                this.is_show_qr_code = true;
                this.creatQrCode(info.active_link);   //生成二维码
            },
            //复制链接
            copy_link(){
                this.is_show_copy_success_promit = true;
                setTimeout(()=>{
                    this.is_show_copy_success_promit = false;
                }, 2000);
            },
            //获取所有产品
            getProductList(){
                let that = this;
                baseAjax(api.get_all_product, '', (res)=>{
                    if(res.code === statusCode.success){
                        that.project_list = res.data;
                    }
                });
            },
            //获取相关项目
            getRelatedProductList(){
                let that = this;
                baseAjax(api.get_all_product, '', (res)=>{
                    if(res.code === statusCode.success){
                        that.related_project_list = res.data;
                        that.related_project_list.unshift({
                            id:0,
                            name:'未分配'
                        });
                    }
                });
            },
            //生成二维码
            creatQrCode(activeLink){
                let that = this;
                this.$nextTick(()=>{
                    var code = new QRCode(that.$refs.qrCodeUrl, {
                        text: activeLink, // 需要转换为二维码的内容
                        width: 100,
                        height: 100,
                        colorDark: '#000000',
                        colorLight: '#ffffff',
                        correctLevel: QRCode.CorrectLevel.H
                    })
                    return code;
                });
            },
            //关闭活动链接弹框
            closeActiveLinkDialog(done){
                this.is_show_qr_code = false;
                done();
            },
            //标题展示全部
            showArticleTips(obj, row){
                /*obj为鼠标移入时的事件对象*/
                let currentWidth = this.showTips(row);
                /*cellWidth为表格容器的宽度*/
                const cellWidth = obj.target.offsetWidth

                /*当文本宽度小于||等于容器宽度3倍时，代表文本显示未超过3行*/
                currentWidth <= (3*cellWidth) ? row.is_show_article_tip = false : row.is_show_article_tip = true

                this.$forceUpdate();
                this.$set(row);
            },
            //项目展示全部
            showProductTips(obj, row){
                /*obj为鼠标移入时的事件对象*/
                let currentWidth = this.showTips(row);
                /*cellWidth为表格容器的宽度*/
                const cellWidth = obj.target.offsetWidth

                /*当文本宽度小于||等于容器宽度3倍时，代表文本显示未超过3行*/
                currentWidth <= (3*cellWidth) ? row.is_show_product_tip = false : row.is_show_product_tip = true
                this.$forceUpdate();
                this.$set(row);
            },
            showTips(row){
                /*width为文本在页面中所占的宽度，创建标签，加入到页面，获取width,最后在移除*/
                let TemporaryTag = document.createElement('span');
                TemporaryTag.innerText = row.articleTitle;
                TemporaryTag.className = 'getTextWidth';
                document.querySelector('body').appendChild(TemporaryTag);
                let currentWidth = document.querySelector('.getTextWidth').offsetWidth;
                document.querySelector('.getTextWidth').remove();

                return currentWidth;
            },
            //新增文章
            addArticle(){
                this.$router.push('/addArticleManagement');
            },
            //编辑文章
            edit_info(info){
                this.$router.push('/editArticleManagement');
                Cookies.set('article_info', this.EncryUtil.encryptByAES(JSON.stringify(info)), {expires: 24 * 60 * 60 * 1000});
            }
        }
    }
</script>

<style lang="less" scoped>
.article{
    font-family: PingFangSC-Regular, PingFang SC;
    .search{
        .left,.center{
            margin-right:50px;
            .project_name{
                margin-bottom:14px;
            }
            /deep/.el-date-editor{
                .el-input__prefix{
                    .el-input__icon{
                        line-height:32px;
                    }
                }
                .el-input__suffix{
                    .el-input__suffix-inner{
                        .el-input__icon{
                            line-height:32px;
                        }
                    }
                }
            }
        }
    }
    .article_list{
        /deep/.el-table{
            thead{
                tr{
                    th:first-child{
                        padding-left:23px;
                    }
                }
            }
            tbody{
                tr{
                    td{
                        padding: 10px 0 12px 0;
                        .show_all_tip{
                            display:-webkit-box;
                            text-overflow:ellipsis;
                            overflow:hidden;
                            -webkit-line-clamp: 3;
                            -webkit-box-orient:vertical;
                            cursor: pointer;
                        }
                    }
                    td:first-child{
                        padding-left:23px;
                    }
                    // td:nth-child(2){
                    //     .myNote{
                    //         display:-webkit-box;
                    //         text-overflow:ellipsis;
                    //         overflow:hidden;
                    //         -webkit-line-clamp: 3;
                    //         -webkit-box-orient:vertical;
                    //         cursor: pointer;
                    //     }
                    // }
                    td:nth-child(4){
                        .cell{
                            line-height:21px;
                            span{
                                height: 20px;
                                padding:4px 11px;
                                font-size:12px;
                            }
                        }
                    }
                    td:last-child{
                        .cell{
                            button:nth-last-child(2){
                                margin-left:20px;
                            }
                        }
                    }
                }
            }
        }
    } 
    i {
      font-size: 20px;
    }
}
</style>
